<template>
	<view class="content b-t">
		<view class="list b-b" v-for="(item,index) in addressList" :key="index">
			<view class="wrapper">
				<view class="address-box">
					<text v-if="item.FDefault==1" class="tag">默认</text>
					<text class="address">{{item.FPrCityArea}} {{item.FAddress}}</text>
				</view>
				<view class="u-box">
					<text class="name">{{item.FConsignee}}</text>
					<text class="mobile">{{item.FPhone}}</text>
				</view>
			</view>
			<text class="yticon icon-iconfontshanchu1" :data-id="item.FItemID" :data-index="index"
				@click="deleteAddress"></text>
			<text class="yticon icon-bianji" :data-item="item" data-type="edit" @click="addAddress"></text>
		</view>
		<!-- <text style="display:block;padding: 16upx 30upx 10upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">
				重要：添加和修改地址回调仅增加了一条数据做演示，实际开发中将回调改为请求后端接口刷新一下列表即可
			</text> -->

		<button class="add-btn" data-type="add" @click="addAddress">新增地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: '', //地址列表
				share: 1, //是否是分享进来的
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (JSON.stringify(options) != '{}') {
				this.share = options.share;
			}
		},
		onShow: function() {
			//获取收货地址 WxUserInfo/GetAddress
			this.$util.util('WxUserInfo/GetAddress', {}, 'POST').then(res => {
				//console.log(res);
				this.addressList = res;
				//指是否有地址，0=>没有（则需要填写才能参加活动），1=>有
				uni.setStorageSync('addressList', 1)
			}).catch(error => {
				//console.log(error);
				this.addressList = '';
				uni.setStorageSync('addressList', 0);
			});
		},
		methods: {

			addAddress(e) {
				//console.log(e);
				let type = e.currentTarget.dataset.type,
					item = e.currentTarget.dataset.item,
					data1 = JSON.stringify(item),
					data2 = this.share,
					data = type == 'edit' ? data1 : data2;
				uni.navigateTo({
					url: '/pages/Marketing/aboutUs/address/add/add?type=' + type + '&data=' + data,
				})
			},
			//删除地址
			deleteAddress(e) {
				//console.log(e);
				let id = e.currentTarget.dataset.id,
					index = e.currentTarget.dataset.index,
					list = this.data.addressList;
				this.$util.util('WxUserInfo/DeleteAdress', {
					itemid: id
				},'POST').then(res => {
					//console.log(res);
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					})
					list.splice(index, 1);
						this.addressList= list;
				}) //.catch(error=>//console.log(error));;
			},
			//修改
			onModify: function(e) {
				//console.log(e.currentTarget.dataset.item);
				let list = e.currentTarget.dataset.item;
				list = JSON.stringify(list);
				uni.navigateTo({
					url: '/pages/Marketing/aboutUs/address/add/add?id=1&list=' + list,
				})
			},
			//删除
			onDelete: function(e) {
				//console.log(e.currentTarget.dataset);
				let id = e.currentTarget.dataset.id;
				this.$util.util('WxUserInfo/DeleteAdress', {
					itemid: id
				},'POST').then(res => {
					//console.log(res);
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					})
					this.onLoad();
				}) //.catch(error=>//console.log(error));
			},
			onSave: function() {
				uni.navigateTo({
					url: '/pages/Marketing/aboutUs/address/add/add?id=0&share=' + this.share,
				})
			},
		}
	}
</script>

<style>
	page {
		padding-bottom: 120rpx;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

	}

	.tag {
		font-size: 24rpx;
		color: #fa436a;
		margin-right: 10rpx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
		line-height: 1;
		text-align: center;
	}

	.address {
		font-size: 30rpx;
		color: #303133;
	}

	.u-box {
		font-size: 28rpx;
		color: #909399;
		margin-top: 16rpx;
	}

	.name {
		margin-right: 30rpx;
	}

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: 40rpx;
		color: #909399;
		padding-left: 30rpx;
	}

	.add-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 16rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #fa436a;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	@font-face {
		font-family: yticon;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_1078604_w4kpxh0rafi.ttf') format('truetype');
	}

	.yticon {
		font-family: "yticon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-iconfontshanchu1:before {
		content: "\e619";
	}

	.icon-bianji:before {
		content: "\e646";
	}
</style>
